<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="../js/jquery-1.11.0.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>

<body>
    <div class="header">
        <div class="fl">
            <a href="../html/index.html"><img src="../img/logo.png" alt=""></a>
        </div>
        <h1>欢迎登录</h1>
        <div class="fr">
            <span class="fa fa-commenting-o"></span>
            <a href="#">
                <p>登录页面，调查问卷</p>
            </a>
        </div>
    </div>
    <div class="warning">
        <p>⚠依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="#">《京东隐私政策》</a><span>已上线，将更有利于保护您的个人隐私。</span></p>
    </div>
    <div class="login_BannerWrap">
        <div class="login_Banner">
            <img src="../img/login_banner.jpg" alt="">
            <div class="login_form">
                <p class="tips">⚠京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
                <p class="checked1"><a href="#" id="saoma">扫码登录</a><span>|</span></p>
                <p class="checked2"><a href="#" id="zhanghao">账户登录</a></p>


                <!-- 扫码登录 -->
                <div class="codeBox">
                    <div class="code">
                        <img src="../img/show.png" alt="" class="pic1">
                    </div>
                    <img src="../img/phone-orange.png" alt="" class="pic2">
                    <p>打开<a href="#">手机京东</a>&nbsp;&nbsp;&nbsp;扫描二维码</p>
                    <div class="safe">
                        <div class="fa fa-font">&nbsp;&nbsp;&nbsp;免输入</div>
                        <div class="fa fa-cogs">&nbsp;&nbsp;&nbsp;更快</div>
                        <div class="fa fa-expeditedssl">&nbsp;&nbsp;&nbsp;更安全</div>
                    </div>
                </div>
                <!-- 将军此生叹，非等闲之人，饮尽三碗酒，泪湿星辰。卸下戎装归去，闲坐且吹笙，朝暮四时皆暖春 -->
                <!-- 账号登录 -->
                <div class="Account">
                    <span class="fa fa-address-book-o"></span><input type="text" placeholder="邮箱/用户名/登录手机"
                        class="username"><br>
                    <span class="fa fa-eye-slash"></span><input type="password" placeholder="密码"
                        class="psw"><br>
                    <p><a href="#">忘记密码</a></p>
                    <input type="submit" value="登录" id="btn">
                </div>

                <div class="register">
                    <span class="fa fa-qq" id="QQ"><a href="#">QQ</a></span>|
                    <span class="fa fa-weixin" id="wechat"><a href="#">微信</a></span>
                    <span class="fa fa-chevron-circle-right" id="zhuce"><a
                            href="../html/registered.html">立即注册</a></span>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a>|</li>
            <li><a href="#">联系我们</a>|</li>
            <li><a href="#">人才招聘</a>|</li>
            <li><a href="#">商家入驻</a>|</li>
            <li><a href="#">广告服务</a>|</li>
            <li><a href="#">手机京东</a>|</li>
            <li><a href="#">友情链接</a>|</li>
            <li><a href="#">销售联盟</a>|</li>
            <li><a href="#">京东社区</a>|</li>
            <li><a href="#">京东公益</a>|</li>
            <li><a href="#">English Site</a></li>
        </ul><br>
        <p>Copyright © 2004-2020 京东JD.com 版权所有</p>
    </div>
    <!-- <script src="../js/jquery-1.11.0.js"></script> -->
    <script>
        $(".code").mouseenter(function () {
            $(".code").stop().animate({
                    "left": "10px",
                }).next()
                .fadeIn("fast");
            $(".code").mouseleave(function () {
                $(".pic2").fadeOut().prev()
                    .stop().animate({
                        "left": "80px",
                    })
            })
        })
        $("#saoma").click(function () {
            $("#saoma").css({
                "color": "#EF4D13"
            })
            $("#zhanghao").css({
                "color": "#999"
            })
            $(".Account").css({
                "display": "none"
            });
            $(".codeBox").css({
                "display": "block",
            })
        })
        $("#zhanghao").click(function () {
            $("#zhanghao").css({
                "color": "#EF4D13"
            })
            $("#saoma").css({
                "color": "#999"
            })
            $(".codeBox").css({
                "display": "none"
            });
            $(".Account").css({
                "display": "block",
            })
        })
        $("#btn").click(function () {
            var userName = $(".username").val()
            var PSW = $(".psw").val()
            $.get("http://jx.xuzhixiang.top/ap/api/login.php",{  
                username:userName,
                password:PSW
            },data=>{
                console.log(data);
                $.cookie("userName",JSON.stringify(data.data));
                // alert("登录成功!")

                // location.href = "index.html";
            })
        })
        
        let ipts = document.querySelectorAll("input");
        let isUsername = false;
        ipts[0].onchange = function () {
            let usernameReg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (usernameReg.test(this.value)) {
                isUsername = true;
              
            } else {
                isUsername = false;
              
            }
        };

        let isPassword = false;
        ipts[1].onchange = function () {
            let reg = /^\S{6,}$/;
            if (reg.test(this.value)) {
                isPassword = true;
            } else {
                isPassword = false;
            }
        }
        ipts[2].onclick = function () {
            if (isUsername && isPassword) {
                //说明可以登录 发起登录请求
                console.log("说明可以登录 发起登录请求");
                //接口地址 
                let url =`http://jx.xuzhixiang.top/ap/api/login.php?username=${ipts[0].value}&password=${ipts[1].value}`
                //发起请求
                let xhr = new XMLHttpRequest()
                xhr.open('get', url)
                xhr.send()
                xhr.onload = function () {
                    //请求完成了   相当于 readyStatus==4
                    if (xhr.status == 200) {
                        let obj = JSON.parse(xhr.responseText);
                        console.log(obj);
                        alert(obj.msg)

                        if (obj.code == 1) {
                             location.href="index.html"

                            //token  登录凭据
                            //id 用户的id
                            localStorage.setItem('id', obj.data.id);
                            localStorage.setItem('token', obj.data.token)
                            localStorage.setItem('username', obj.data.username)
                        }
                    }
                }
            } else {
                console.log("请检查输入框的内容");
            }
        }
    </script>
</body>

</html>